<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>牧心农业</title>
    <link rel="stylesheet" type="text/css" href="/static/css/eui.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
    <div class="content relative">
        <div class="bg1 all_width main_content main_height" style="padding:5%">
            <div class="block_text all_height lineheight_2 farmers_info">
                <div class="lineheight_3 font_18 v_center"><span class="title_colorblcok"></span>农户分布</div>
                <div class="row farmers listscroll"></div>
                <div class="dots">
                    <div class="block_dot"></div>
                    <div class="block_dot"></div>
                    <div class="block_dot"></div>
                    <div class="block_dot"></div>
                </div>
            </div>
        </div>
        <div class="bg_gradient_foot v_center foot_height" style="padding:0 8%">
            <div class="flex" style="width:360px;margin-right:40px;">
                <div class="flex_1 margin_r_5 relative">
                    <div class="absolute iconfont icon-down"></div>
                    <select name="" class="select1 all_width bg_green circle_5 white padding_5">
                        <option value="柞水县">柞水县</option>
                    </select>
                </div>
                <div class="flex_1 margin_r_5 relative">
                    <div class="absolute iconfont icon-down"></div>
                    <select name="" class="select2 all_width bg_green circle_5 white padding_5">
                        <option value="上关乡">上关乡</option>
                    </select>
                </div>
                <div class="flex_1 relative">
                    <div class="absolute iconfont icon-down"></div>
                    <select name="" class="select3 all_width bg_green circle_5 white padding_5">
                        <option value="门头沟村">门头沟村</option>
                    </select>
                </div>
            </div>
            <div class="flex circle_5 bg_green padding_v_5 text_center">
                <input type="text" class="left_70 white padding_h_5 keywords" placeholder="输入农户姓名">
                <div class="width_70 white border_l padding_h_5 cursor" onclick="search()">检索 <i class="iconfont icon-fangdajing"></i></div>
            </div>
        </div>
        <div class="absolute all bg_dark flex farmer hide" style="padding:5% 7%;"></div>
        <div class="absolute all flex pig_info hide" style="padding:5% 4%;"></div>
    </div>
    <script type="text/template" charset="utf-8" id='farmer_template'></script>
    <script type="text/template" charset="utf-8" id='pig_template'></script>
    <script type="text/template" charset="utf-8" id='record_template'></script>
    <script type="text/template" charset="utf-8" id='list_template'>
        {{for (var i=0;i<it.length;i++){ }}
            <div class="col_4 cursor" onclick="getfarmer('{{=it[i].id}}')"><i class="iconfont icon-location font_20"></i> {{=it[i].address}}{{=it[i].name}}</div>
        {{ } }}
    </script>
    <script type="text/template" charset="utf-8" id='area_template'>
        {{if(Object.keys(it.data).length){}}
            {{for(var i in it.data){ }}
                <option value="{{=i}}"{{ if(it.val==i){ }}selected{{ } }}>{{=it.data[i].name}}</option>
            {{ } }}
        {{}else{}}
            <option value="">暂无</option>
        {{}}}
    </script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/doT.min.js"></script>
    <script src="/static/js/swiper.min.js"></script>
    <script src="/static/js/func.js"></script>
    <script>
        // 联动初始化
            var address = <{$address}>;
            console.log(address);
            var evalarea = doT.template($("#area_template").text());
            level({ele:".select",data:address,level1:"",level2:"",level3:"",func:evalarea})
        // 农户列表模版
            var farmerdata = <{$farmers}>;
            console.log(farmerdata)
            var evallist = doT.template($("#list_template").text());
            $(".farmers").html(evallist(farmerdata));
        // 搜索
            function search(){
                var n = $(".select3").val();
                $.post("/screen/site/search-farmer?cunid="+n,{name:$(".keywords").val()},function(res){console.log(res)
                    $(".farmers").html(evallist(res));
                },"json");
            }
        // 打开农户详情浮层
            function getfarmer(n){
                $(".main_content").removeClass("main_height").addClass("all_height");
                $(".foot_height,.farmers_info").hide();
                getfarmerinfo(n)
            }
        // 关闭农户详情浮层
            function closefarmer(){
                $(".main_content").addClass("main_height").removeClass("all_height");
                $(".foot_height,.farmers_info").show();
                $(".farmer").hide();
            }
    </script>
</body>
</html>
